<template>
	<div class="table">
		<el-table
			:data="SanitaryTable"
			:header-cell-style="{
				backgroundColor: '#00B4D422',
				color: '#000',
				fontSize: '16px',
			}"
			:row-style="tableRowClassName">
			<el-table-column prop="hygId" label="卫生检查编号" />
			<el-table-column prop="buildId" label="楼栋号" />
			<el-table-column prop="dorNumber" label="寝室号" />
			<el-table-column prop="checkPerson" label="检查人" />
			<el-table-column prop="hygDes" label="检查内容" />
			<el-table-column prop="checkSore" label="分数" />
			<el-table-column label="检查时间">
				<template #default="{ row }">
					{{ new Date(row.checkTime).toLocaleDateString() }}
				</template>
			</el-table-column>

			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button link type="danger" @click="showDialog(row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>

	<!-- 分页 -->
	<el-row class="pagination">
		<el-pagination
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:page-sizes="pageSizes"
			small="small"
			:background="true"
			layout="total, sizes, prev, pager, next"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange" />
	</el-row>

	<!-- 编辑信息对话框 -->
	<ModfiySanitaryDialog v-model:modifyVisible="modifyVisible" :data="data" />


</template>

<script setup>
import ModfiySanitaryDialog from '@/components/dialog/ModfiySanitaryDialog.vue'
import { getHygOne } from '@/utils/axios/domiRequests'
import { getHygOneBuild } from '@/utils/axios/getTotal'
import { useUserStore } from '@/stores/userStore'

import { ref, reactive, onMounted } from 'vue'

const { userInfo } = useUserStore()

const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = reactive([10, 20, 30])
const total = ref(0)

const modifyVisible = ref(false)

const data = ref({})

const SanitaryTable = ref([])



// 分页操作
const handleSizeChange = async (val) => {
	let { data } = await getHygOne({ currentPage: currentPage.value, pageSize: val })
	SanitaryTable.value = data
}
const handleCurrentChange = async (val) => {
	let { data } = await getHygOne({ currentPage: val, pageSize: pageSize.value })
	SanitaryTable.value = data
}

// 展示对话框
const showDialog = (val) => {
	data.value = val
	modifyVisible.value = true
}
onMounted(async () => {
	let { data } = await getHygOne({ currentPage: currentPage.value, pageSize: pageSize.value })
	let res = await getHygOneBuild({ buildId: Number.parseInt(userInfo.buildId) })
	total.value = res.data
	SanitaryTable.value = data
})

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}
</script>

<style scoped lang="scss"></style>
